'use client'

import React from 'react';
import './globals.css'
import Layout, {Content, Header} from "antd/lib/layout/layout";
import Sider from "antd/lib/layout/Sider";
import {Button, Flex} from 'antd';
import Search from "antd/lib/input/Search";
import {HomeOutlined, SettingFilled} from "@ant-design/icons";

const headerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: '#000',
    height: 48,
    padding: 0,
    // lineHeight: '42px',
    backgroundColor: '#FFFAFA',
};

const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#000',
    backgroundColor: '#fff',
};

const siderStyle: React.CSSProperties = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#000',
    backgroundColor: '#F5F5F5',
};

export default function RootLayout({
                                       children,
                                   }: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
        <body style={{padding: 0, margin: 0}}>
        <Layout style={{height: innerHeight}}>
            <Sider data-tauri-drag-region style={siderStyle}>
                <div data-tauri-drag-region style={{height: innerHeight}}>
                    <Button type="primary" href={"greet"}>greet</Button>
                    <br/>
                    <Button type="primary">按钮2</Button>
                </div>
            </Sider>
            <Layout>
                <Header style={headerStyle}>
                    <Flex gap={"middle"} data-tauri-drag-region style={{padding: 0}}>
                        <span data-tauri-drag-region
                              style={{width: '80%', height: 48, lineHeight: "48px", marginTop: 8}}>
                            <Search
                                placeholder="搜索"
                                size="middle"
                                style={{width: '65%'}}
                            />
                        </span>
                        <span data-tauri-drag-region
                              style={{width: '20%', textAlign: "right", height: 48, lineHeight: "48px", marginTop: 0,}}>
                            <SettingFilled/>&nbsp;&nbsp;
                            <HomeOutlined/>&nbsp;&nbsp;&nbsp;
                        </span>
                    </Flex>
                </Header>
                <Content style={contentStyle} id="main_content">
                    {children}
                </Content>
            </Layout>
        </Layout>

        </body>
        </html>
    )
}
